<template>
    <section class="home">
        <div id="search">
            <router-link to="/search">
                <div class="search_input">
                    <i class="iconfont icon-sousuo1"></i>搜索
                </div>
            </router-link>
        </div>
      
         <section class="video_list">
            <ul>
                <li :key="list.id"  v-for="(list,index) in list">
                    <router-link :to="'/detail/'+list.id">
                        <div><img  :src="baseUrl+list.img" alt=""></div>
                        <h3>{{list.name}}</h3>
                        <div>
                    
                            <span>{{list.star}}</span>
                        </div> 
                    </router-link>
                </li>
            </ul>
        </section>
    </section>
</template>

<script>
	
import axios from 'axios'
import {getVideoList,getCommont,baseUrl} from "@/config/axios.js"
export default {
    name: 'home',
  
    data () {
        return {
           list:[],
           baseUrl:baseUrl
        }
    },

    created () {
     	getVideoList().then(res=>{
     		console.log(res.data)
     		this.list=res.data.data[3]
     	})
 
    },
    watch: {
        
    },
    methods:{
      
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
img{
	width: 200px;
	height: 200px;
}

</style>
